<template>
  <Teleport v-if="isMounted" :to="`#${renderId}`">
    <el-cascader
      :key="renderId"
      ref="CommonCascader"
      v-model="modelValue"
      class="common-cascader"
      :options="options"
      v-bind="attrs"
      @change="change"
      @blur="blur"
    />
  </Teleport>
</template>

<script>
  export default {
    name: 'CommonCascader',
    components: {},
    data() {
      return {
        visible: false,
        renderId: 'common-container', // 传送到的目标元素id
        modelValue: '',
        isObjectValue: false,
        options: [],

        curInstance: null,
        attrs: {},
        isMounted: false,
      };
    },
    computed: {},
    mounted() {
      this.isMounted = true;
    },
    methods: {
      change(val) {
        // console.log('sdsadada',val)
        // this.modelValue = val
        this.curInstance.updateValue(val);
      },
      blur() {
        console.log('blur');
        this.visible = true;
      },
      resetAttr() {
        this.renderId = 'common-container';
        this.curInstance = null;
        this.options = [];
        this.isObjectValue = false;
        this.modelValue = '';
        this.attrs = {};
      },
      async toggleMenu({ renderId, curInstance, attrs, curValue, options }) {
        // console.log('toggleMenu',curValue)
        // 重复点击做处理
        if (this.renderId === renderId) {
          if (this.visible) {
            this.visible = false;
            return;
          }
        }

        this.renderId = renderId;
        this.curInstance = curInstance;
        this.options = options;
        this.modelValue = curValue;
        this.attrs = attrs;

        await this.$nextTick();
        this.$refs['CommonCascader']?.$el.nextSibling.click();
      },
      forceUpdate() {
        this.modelValue = '';
      },
    },
  };
</script>

<style lang="scss"></style>
